<template>
  <div class="teachingTime">
     <div id="container" v-show="!loader.show">
        <div class="header_group">
              <h6>编辑教学经验</h6>
              <p>添加教学经验提高认证成功机率</p>
        </div>
        <div class="container">
             <p class="title" v-show="experienceList.length>0">教学经验</p>
             <ul class="list">
                 <li v-for="experience in experienceList">
                      <div class="content">{{experience.description}}</div>
                      <p class="time">{{experience.startDate}} 到 {{experience.endDate}}</p>
                      <i class="del" @click="del(experience.experienceId);"></i>
                 </li>
             </ul>
        </div>
        <ul class="experience">
             <li @click="selectedDate.show=true;dateType=1;selectedDate.actual=startDate;selectedDate.temporary=startDate;">
                 <label>开始时间</label>
                 <input type="text" v-model="startDate" placeholder="请选择开始时间" readonly/>
             </li>
             <li @click="selectedDate.show=true;dateType=2;selectedDate.actual=endDate;selectedDate.temporary=endDate;">
                 <label>结束时间</label>
                 <input type="text" v-model="endDate" placeholder="请选择结束时间" readonly/>
             </li>
        </ul>
        <div class="info3">
             <p>自我描述</p>
             <textarea v-model="description" placeholder="建议从三个方面阐述：1.教学内容 2.教学方法 3.教学效果"></textarea>
             <div class="count">{{description.length}}/120</div>
        </div>
        <p class="commit1" @click="commit1();">保存教学经验</p>
        <p class="commit2" @click="commit2();" v-if="getExperienceList.length==0">暂无教学经验</p>
        <router-link class="commit" tag="p" :to="{path:'index'}">返回</router-link>
     </div>
     <!--日历-->
     <date :selectedDate="selectedDate"></date>
     <!--公共提示-->
     <tip :tip="tip" :loading="loading" :loader="loader"></tip>
  </div>
</template>

<script>
import tip from './tip'
import date from './date'
export default {
    name:'teachingExperience',
    data(){
        return{
            startDate:'',
            endDate:'',
            description:'',
            userId:'',
            remark:'',
            getExperienceList:[],
            tip:{
              status:false,
              msg:''
            },
            loading:{
              status:false,
              msg:''
            },
            loader:{
              show:true
            },
            selectedDate:{
              actual:'',
              temporary:'',
              show:false,
              year:[2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017]
            },
            dateType:''
        }
    },
    components:{
      tip,date
    },
    mounted:function(){
        this.userId = this.$route.query.userId;
        this.getInitialData();
    },
    computed:{
      experienceList(){
        let experienceList=[];
        this.getExperienceList.forEach(function(v,i){
          if(v.startDate){
             experienceList.push(v);
          }
        });
        return experienceList;
      }
    },
    watch:{
      'description':function(){
        if(this.description.length>120){
          this.description=this.description.substring(0,120);
        }
      },
      'selectedDate.actual':function(){
        if(this.dateType==1){
           this.startDate=this.selectedDate.actual;
        }else if(this.dateType==2){
           this.endDate=this.selectedDate.actual;
        }
      }
    },
    methods:{
        getInitialData(){
            let _this=this;
            _this.$http.get("/api/teacherController.do?id="+_this.userId+"&getTeacherExperienceInfoById=null").then((data)=>{
               console.log(data);
               _this.getExperienceList=data.body;
               _this.loader.show=false;
            })
        },
        //删除教学经验
        del(experienceId){
           let _this=this;
            _this.$http.get("/api/teacherController.do?id="+_this.userId+"&experienceId="+experienceId+"&deleteTeacherExperienceInfo=null").then((data)=>{
               console.log(data);
               if(data.body.result="ok"){
                  _this.showTip('删除成功');
                  _this.getExperienceList.forEach(function(v,i){
                    if(v.experienceId==experienceId){
                       _this.getExperienceList.splice(i,1);
                    }
                  });
               }
            })
        },
        //提示
        showTip(msg){
            let _this=this;
            _this.tip.msg=msg;
            _this.tip.status=true;
            setTimeout(function(){_this.tip.status=false;},1000);
        },
        commit1(){
            let _this=this;
            if(!_this.startDate){
                _this.showTip("请选择教学起始时间");
                return false;
            }
            if(!_this.endDate){
                _this.showTip("请选择教学结束时间");
                return false;
            }
            if(!_this.description){
                _this.showTip("请描述您的教学经验");
                return false;
            }
             _this.loading.msg="提交中...";
            _this.loading.status=true;
            _this.$http.post('/api/teacherController.do?saveTeacherExperienceInfo',
                            {
                              id:_this.userId,
                              createDate: new Date(),
                              startDate:_this.startDate,
                              endDate:_this.endDate,
                              description:_this.description,
                              remark:_this.remark,
                              status:''
                            })
                .then(
                  (response)=>{
                     _this.loading.status=false;
                     _this.showTip('保存成功');
                     let newExperienceObj={};
                     newExperienceObj.startDate=_this.startDate;
                     newExperienceObj.endDate=_this.endDate;
                     newExperienceObj.description=_this.description;
                     newExperienceObj.experienceId=response.body.experienceId;
                     _this.getExperienceList.push(newExperienceObj);
                     _this.startDate='';
                     _this.endDate='';
                     _this.description='';
                  },
                  (error)=>{
                    _this.loading.status=false;
                    console.log(error);
                  }
                );
        },
        commit2(){
            let _this=this;
            _this.loading.msg="提交中...";
            _this.loading.status=true;
            _this.$http.post("/api/teacherController.do?saveTeacherExperienceInfo",
                            {
                              id:_this.userId,
                              startDate:'',
                              endDate:'',
                              description:'',
                              remark:''
                            })
                .then(
                  (response)=>{
                     _this.loading.status=false;
                     _this.tip.msg="保存成功";
                     _this.tip.status=true;
                     setTimeout(function(){
                         _this.tip.status=false;
                        _this.$router.push({path: '/index'});
                     },1000);
                  },
                  (error)=>{
                    _this.loading.status=false;
                    console.log(error);
                  }
                );
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.teachingTime
{
    .header_group
    {
        padding:0.5rem 0;
        text-align:center;
        h6
        {
          color:#078def;
          font-size:0.5rem;
          margin-bottom:0.3rem;
        }
        p 
        {
          color:#999;
        }
    }
    .container
    {
      padding:0 0.3rem;
      background:#fff;
      .title
      {
        line-height:0.8rem;
        font-size:0.24rem;
        color:#999;
      }
      .list
      {
        li
        {
          border-top:1px solid #eee;
          position:relative;
          .content
          {
            padding:0.3rem 0 0.2rem 0;
            line-height:1.4;
          }
          .time
          {
            padding-bottom:0.3rem;
            color:#999;
            font-size:0.24rem;
          }
          .del
          {
            width:0.6rem;
            height:0.6rem;
            display:block;
            position:absolute;
            right:0.1rem;
            bottom:0.2rem;
            background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497724916669&di=217cdcdf48402c526cb2ddb407af723c&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F92%2F50%2F24Q58PICAPV_1024.jpg);
            background-size:0.4rem;
            background-repeat:no-repeat;
            background-position:center;
          }
        }
      }
    }
    .experience
    {
      background:#fff;
      padding-left:0.3rem;
      margin-top:0.3rem;
      li
      {
        position:relative;
        padding:0 0 0 1.4rem;
        height:0.88rem;
        line-height:0.88rem;
        &:first-child
        {
          border-bottom:1px solid #eee;
        }
        &::after 
        {
           content:'';
           display:inline-block;
           width:0.15rem;
           height:0.15rem;
           border-right:1px solid #999;
           border-top:1px solid #999;
           position:absolute;
           right:0.3rem;
           top:0.36rem;
           -webkit-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
               -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                   transform: rotate(45deg);
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
          background:#fff;
        }
      }
    }
    .info3
    {
      position:relative;
      p
      {
        padding:0.3rem 0.3rem 0.1rem 0.3rem;
        color:#666;
        font-size:0.28rem;
      }
      textarea
      {
        padding:0.2rem 0.3rem 0.5rem 0.3rem;
        line-height:1.2;
        box-sizing:border-box;
        width:100%;
        height:2.5rem;
        border:none;
      }
      .count
      {
        position:absolute;
        bottom:0.2rem;
        right:0.3rem;
      }
    }
    .commit2
    {
        margin:0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        border:1px solid #078def;
        text-align:center;
        background:transparent;
        color:#078def;
        font-size:0.32rem;
    }
    .commit1
    {
        margin:0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        border:1px solid #078def;
        text-align:center;
        background:#078def;
        color:#fff;
        font-size:0.32rem;
    }
    .commit
    {
        margin:0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        border:1px solid #078def;
        text-align:center;
        background:#fff;
        color:#078def;
        font-size:0.32rem;
    }
}
</style>
